<template>
    <div class="movie" ref="movie">
      <div class="movie-container" ref="movie-container">
        <!--banner-->
        <div class="banner">
          <scroll-banner :bannerList="bannerList" ></scroll-banner>
        </div>
        <!--正在热映-->
        <div class="movie-item">
          <div class="title">
            <div class="left">{{hotShow.title}}</div>
            <div class="right" @click="$router.push('/allMovie') ">全部({{hotShow.totalNum}})></div>
          </div>
          <div class="content" ref="scroll1" :style="{height: 41+itemWidth*1.41+'px'}">
            <div class="item-wrapper" ref="item-wrapper1" :style="{width:(hotShowLen*(itemWidth+10)-10)+'px'}">
              <div class="item"
                   v-for="item in hotShow.filmList"
                   :style="{width:itemWidth+'px',height:itemWidth*1.4+'px'}"
                   @click="$router.push({path:'/onlineMovieDetails',query:{id:item.id}})"
              >
                <div class="img-box" style="overflow: hidden;height: 100%;width: 100%">
                  <img :src="item.posterPicUrl" alt="" width="100%" height="100%">
                  <span class="score">{{item.score}}</span>
                </div>
                <p class="name">{{item.name}}</p>
                <p class="text">{{item.nameDesc}}</p>
              </div>
            </div>
          </div>
        </div>
        <!--即将上映-->
        <div class="movie-item">
          <div class="title">
            <div class="left">{{comingShow.title}}</div>
            <div class="right" @click="$router.push({path:'/allMovie/notOnlineMovie'})">全部({{comingShow.totalNum}})></div>
          </div>
          <div class="content" ref="scroll2" :style="{height: 41+itemWidth*1.41+'px'}">
            <div class="item-wrapper" ref="item-wrapper0" :style="{width:(comingShowLen*(itemWidth+10)-10)+'px'}">
              <div class="item" v-for="item in comingShow.filmList"
                   :style="{width:itemWidth+'px',height:itemWidth*1.4+'px'}"
                   @click="$router.push({path:'/onlineMovieDetails',query:{id:item.id}})"
              >
                <div class="img-box" style="overflow: hidden;height: 100%;width: 100%">
                  <img :src="item.posterPicUrl" alt="" width="100%"height="100%">
                  <!--<span class="score">9.9</span>-->
                </div>
                <p class="name" >{{item.name}}</p>
                <p class="text" >{{item.nameDesc}}</p>
              </div>
            </div>
          </div>
        </div>
        <!--热点资讯-->
        <div class="news">
          <div class="title">
            <div class="left">{{informations.title}}</div>
            <div class="right" @click="$router.push({path:'/news'})">更多></div>
          </div>
          <div class="content" ref="news-wrapper">
            <div class="line-block-item" v-for="item in informations.infoList" @click="$router.push({path:'/iframeBox',query:{name:item.title,url:item.jumpUrl}})">
              <div class="block border-1px" v-if="item.imgUrls>1">
                <div class="title" style="margin-bottom: 10px;margin-top: 18px">{{item.title}}</div>
                <div class="imgs-wrapper">
                  <div class="img-wrapper" style="font-size: 0">
                    <img v-for="img in item.imgUrls" :src="img" alt="" :style="{height:newsItemHeight+'px'}">
                  </div>
                </div>
                <p class="text">{{item.creatTime}} {{item.clickRate}}热度</p>
              </div>
              <div class="row border-1px" v-if="item.imgUrls.length===1">
                <div class="left">
                  <div class="top">{{item.title}}</div>
                  <div class="bottom">{{item.creatTime}} {{item.clickRate}}热度</div>
                </div>
                <div class="right">
                  <img :src="item.imgUrls[0]" alt="" style="width: 100%;height: 76px">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="refresh-wrapper" v-show="isRefresh">
        <refresh></refresh>
      </div>
      <loading v-show="loading"></loading>
    </div>
</template>

<script>
  import BScroll from 'better-scroll'

  import scrollBanner from '../../../components/scrollBanner/scrollBanner'
  import {setStorage,getStorage} from "../../../common/js/localStorage";
  import refresh from '../../../components/refresh/refresh'
  import loading from '../../../components/loading/loading'
  import {setSession,getSession} from "../../../common/js/sessionStorage";
  import global from '../../../common/js/global'

  export default {
        name: "movie",
        data(){
          return{
            cityCode:'',        //城市编码
            bannerList:[],      //banner图片列表
            comingShow:[],      //即将上映列表
            itemWidth:'',       //通过屏幕宽度得到的scroll图片宽度
            comingShowLen:0,    //即将上映长度
            hotShow:[],         //正在热映列表
            hotShowLen:0,       //正在热映长度
            informations:[],    //热点列表
            newsItemHeight:0,   //热点item高度
            isRefresh:false,    //是否刷新
            currentCity:'',     //当前城市
            loading:true        //是否加载动画
          }
        },
        mounted() {
          // 判断localStorage是否存在channelCode
          // if(getStorage('channelCode')){
          //   if(getStorage('channelCode').length===0){
          //     setStorage('channelCode',this.$route.query.channelCode)
          //   }
          // }else {
          //   setStorage('channelCode',this.$route.query.channelCode)
          // }
          // 获取当前城市
          //单页面设置better-scroll

          //获取视口宽度
          let clientWidth = document.body.clientWidth
          let itemWidth = clientWidth/4
          this.itemWidth = itemWidth
          let newsItemHeight = (this.$refs['news-wrapper'].clientWidth-20)/3*0.72
          this.newsItemHeight = newsItemHeight

          this.$nextTick(()=>{
            if(!this.scroll){
              let scroll = new BScroll(this.$refs.movie,{
                click:true,
                pullDownRefresh: {
                  threshold: 40,
                  stop: 30
                }
              })
              scroll.on('pullingDown', () => {
                this.isRefresh = true
                setTimeout(()=>{
                  window.history.go(0)
                  scroll.finishPullDown();
                },600)
              });
              let scroll1 = new BScroll(this.$refs.scroll1,{
                scrollX:true,
                eventPassthrough:'vertical'
              })
              let scroll2 = new BScroll(this.$refs.scroll2,{
                scrollX:true,
                eventPassthrough:'vertical'
              })
            }else {
              this.scroll.refresh();
            }
          })
          this._getCityCode()
        },
        components:{
          'scroll-banner':scrollBanner,
          'refresh':refresh,
          'loading':loading
        },
        methods:{
          //获取城市编码
          _getCityCode(){
            this.loading = true
              if(getSession('currentCity')){
                this._getIndexList()
                return
              }
                this.$axios(
                  {
                    method:'get',
                    headers:{
                      "Content-Type":"application/json"
                    },
                    url:global.$host+'/cityList',
                  }
                ).then((res)=>{
                  let data =res.data.data.cityList
                  for (let i=0;i<data.length;i++){
                    if(data[i].value===getSession('currentCity')){
                      this.cityCode = data[i].code
                      setSession('currentCityCode',data[i].code)
                      break
                    }
                  }
                })
              this._getIndexList()
          },
          //获取主页信息
          _getIndexList(){
            this.$axios(
              {
                method:'post',
                headers:{
                  "Content-Type":"application/json",
                  "MOBILE-DEVICE":'PSD_H5_1_MPS',
                  // "Content-Type": "application/x-www-form-urlencoded;charset=GBK",
                  "Access-Control-Allow-Credentials":true,
                  'Access-Control-Allow-Origin': '*',
                  'Access-Control-Allow-Headers': 'X-Test-Cors',
                  'Access-Control-Allow-Methods': 'PUT, DELETE,POST,OPTIONS',
                  'Access-Control-Max-Age': '1000',
                },
                url:global.$host+'/index',
                data:{
                  cityCode:this.cityCode
                }
              }
            ).then((res)=>{
              let data =res.data.data
              this.bannerList = data.bannerList
              this.comingShow = data.comingShow
              this.comingShowLen = data.comingShow.filmList.length
              this.hotShow = data.hotShow
              this.hotShowLen = data.hotShow.filmList.length
              this.informations = data.informations
              this.loading = false
              //将即将上映信息与正在热映信息存入localStorage
              setStorage('comingShow',data.comingShow)
              setStorage('hotShow',data.hotShow)
              setStorage('informations',data.informations)
            })
          }
        },
    }
</script>

<style scoped lang="stylus">
  @import "../../../common/stylus/mixin.styl"
  .block
    .title
      height 21px
      line-height 21px
      color #ffffff
      font-size 15px
      margin 0
    .text
      text-align left
      font-size 12px
      color #999999
      padding-top 10px
    .imgs-wrapper
      img
        width calc(33.333% - 7px)
        padding-right 10px
        &:last-child
          padding-right 0
  .refresh-wrapper
    position absolute
    top 10px
    left 0
    width 100%
  .movie
    height 100%
    overflow hidden
    .movie-item
      padding 0 15px
      .title
        display flex
        height 17px
        margin-top 29px
        margin-bottom 18px
        line-height 17px
        .left,.right
          flex 1
        .left
          text-align left
          color #ffffff
          font-size 16px
        .right
          text-align right
          color #C4C4C4
          font-size 12px
      .content
        width 100%
        text-align left
        overflow hidden
        white-space nowrap
        font-size 0
        overflow-scrolling:touch
        .item
          display inline-block
          padding-right  10px
          border-radius 3px
          .img-box
            border-radius 3px
            overflow hidden
            position relative
            .score
              line-height 16px
              display block
              height 14px
              width 20px
              background #EEAC21
              position absolute
              bottom 0
              right 0
              color #161719
              text-align center
              font-size 10px
              border-radius 3px

          &:last-child
            padding-right 0
          .name
            padding-top 10px
            font-size 14px
            color #ffffff
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
          .text
            padding-top 5px
            font-size 10px
            color #C4C4C4
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
            height 17px
    .news
      padding 0 15px
      .title
        display flex
        height 17px
        margin-top 29px
        margin-bottom 18px
        line-height 17px
        .left,.right
          flex 1
        .left
          text-align left
          color #ffffff
          font-size 16px
        .right
          text-align right
          color #C4C4C4
          font-size 12px

      .content
        .row
          display flex
          padding 18px 0
          .left
            flex 1
            text-align left
            .top
              height 42px
              color #ffffff
              line-height 21px
              font-size 14px
            .bottom
              font-size 12px
              color #999999
              height 12px
              line-height 12px
              padding-top 18px
          .right
            flex 0 0 35%
            text-align right
            padding-left 16px
  .line-block-item
    .row
      border-1px (#343434)
    .block
      border-1px (#343434)
    &:last-child
      /*background #449fdb*/
      .block
        border-1px (#161719) !important
      .row
        border-1px (#161719) !important
</style>
